<template>
  <div class="scenic-page">
    <div class="scenic-content">
      <div class="scenic-main">
        <div class="strategy-header">
          <div class="header-particles">
            <div class="particle" v-for="n in 20" :key="n"></div>
          </div>
          <div class="strategy-header-content">
            <h2>景点探索</h2>
            <div class="strategy-subtitle">
              <span class="subtitle-text">发现美好</span>
              <span class="subtitle-divider">•</span>
              <span class="subtitle-text">享受旅程</span>
            </div>
            <div class="section-intro">
              <div class="intro-badge">精选景点</div>
              <h3>探索最美的自然风光</h3>
              <p>基于真实用户评价，为您推荐最值得游览的景点</p>
            </div>



          </div>
          <div class="strategy-search">
            <input type="text" v-model="search" placeholder="搜索您想去的景点..." />
          </div>

          <div class="segmented-block">
            <div class="segmented-label"></div>
            <el-segmented v-model="levelFilter" :options="levelOptions" size="small"
              class="level-segmented glass-segmented" />
          </div>
          <div class="segmented-block">
            <div class="segmented-label"></div>
            <el-segmented v-model="altitudeFilter" :options="altitudeOptions" size="small"
              class="altitude-segmented glass-segmented" />
          </div>
          <div class="segmented-block">
            <div class="segmented-label"></div>
            <el-segmented v-model="provinceFilter" :options="provinceOptions" size="small"
              class="province-segmented glass-segmented" />
          </div>
        </div>

        <div class="content-wrapper">
          <div class="rank-widget" :class="{ 'rank-widget-collapsed': isRankCollapsed }" ref="rankWidget">
            <div class="rank-widget-header">
              <h3 v-if="!isRankCollapsed">热门榜单</h3>
              <div v-else class="collapsed-rank-icon-container">
                <el-icon class="collapsed-rank-icon">
                  <Collection />
                </el-icon>
              </div>
              <button class="toggle-btn" @click="toggleRankWidget" :class="{ 'collapsed': isRankCollapsed }">
                <el-icon>
                  <ArrowUp v-if="!isRankCollapsed" />
                  <ArrowDown v-else />
                </el-icon>
              </button>
            </div>

            <div class="rank-widget-content" v-if="!isRankCollapsed" ref="rankContent">
              <div class="rank-tabs">
                <div class="rank-tab" v-for="board in boards" :key="board.type"
                  :class="{ 'active': activeTab === board.type }" @click="activeTab = board.type">
                  {{ board.title }}
                </div>
              </div>

              <div class="rank-content">
                <template v-if="rankLoading">
                  <div class="rank-item-skeleton" v-for="n in 5" :key="n">
                    <el-skeleton-item variant="image" class="rank-img-skeleton" />
                    <div class="rank-info-skeleton">
                      <el-skeleton-item variant="text" class="rank-name-skeleton" />
                      <el-skeleton-item variant="text" class="rank-desc-skeleton" />
                    </div>
                  </div>
                </template>

                <template v-else>
                  <div class="rank-item" v-for="(scenic, idx) in getCurrentRankScenics()" :key="scenic.id"
                    @click="goToScenicDetail(scenic.id)">
                    <div class="rank-thumbnail">
                      <img class="rank-img" :src="scenic.img || 'https://picsum.photos/200x120'" :alt="scenic.name" />
                    </div>
                    <div class="rank-info-container">
                      <div class="rank-number">{{ idx + 1 }}</div>
                      <div class="rank-info">
                        <div class="rank-name-container">
                          <span class="rank-name">{{ scenic.name }}</span>

                          <el-tag v-if="scenic.scenicLevel" :type="getLevelTagType(scenic.scenicLevel)"
                            class="scenic-level-tag" size="small">
                            {{ formatScenicLevel(scenic.scenicLevel) }}
                          </el-tag>
                        </div>
                        <div v-if="activeTab === 'good'" class="rank-meta">
                          <el-icon class="meta-icon">
                            <StarFilled />
                          </el-icon>
                          <span>{{ scenic.likeCount || 0 }} 点赞</span>
                        </div>
                        <div v-else-if="activeTab === 'hot'" class="rank-meta">
                          <el-icon class="meta-icon">
                            <Collection />
                          </el-icon>
                          <span>{{ scenic.favoriteCount || 0 }} 收藏</span>
                        </div>
                        <div v-else-if="activeTab === 'difficulty'" class="rank-meta">
                          <el-rate :model-value="scenic.comprehensive_difficulty_index || 0" :max="5" disabled
                            allow-half size="small" class="difficulty-rate" />
                        </div>
                      </div>
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </div>

          <div class="scenic-card-container">
            <template v-if="loading">
              <div class="scenic-card-list">
                <div v-for="n in 6" :key="n" class="scenic-card-skeleton">
                  <el-skeleton-item variant="image" class="scenic-img-skeleton" />
                  <div class="scenic-info-skeleton">
                    <el-skeleton-item variant="text" class="scenic-title-skeleton" />
                    <el-skeleton-item variant="text" class="scenic-desc-skeleton" />
                    <el-skeleton-item variant="text" class="scenic-desc-skeleton-line" />
                    <div class="scenic-actions-skeleton">
                      <el-skeleton-item variant="button" class="action-button-skeleton" />
                      <el-skeleton-item variant="button" class="action-button-skeleton" />
                    </div>
                  </div>
                </div>
              </div>
            </template>

            <template v-else-if="filteredScenics.length === 0">
              <el-empty description="暂无景点数据" class="empty-scenic-list"></el-empty>
            </template>

            <div v-else class="scenic-card-list">
              <div class="scenic-card" v-for="scenic in filteredScenics" :key="scenic.scenicSpotId"
                @click="goToScenicDetail(scenic.scenicSpotId)">
                <img class="scenic-img" :src="scenic.mainImage || 'https://picsum.photos/800/400'"
                  :alt="scenic.scenicAreaName" />
                <div class="scenic-info">
                  <div class="scenic-title-container">
                    <span class="scenic-title">{{ scenic.scenicAreaName }}</span>
                    <span class="scenic-province">{{ regionMap[scenic.regionId]?.province }}</span>
                    <el-tag v-if="scenic.scenicLevel" :type="getLevelTagType(scenic.scenicLevel)"
                      class="scenic-level-tag" size="small">
                      {{ formatScenicLevel(scenic.scenicLevel) }}
                    </el-tag>
                  </div>
                  <div class="scenic-desc">{{ scenic.scenicSpotDescription }}</div>
                  <div class="scenic-actions">
                    <button class="action-button like-button" @click.stop="toggleLike(scenic)"
                      :class="{ 'is-active': scenic.isLiked }">
                      <el-icon>
                        <Star />
                      </el-icon>
                    </button>
                    <button class="action-button collect-button" @click.stop="toggleCollect(scenic)"
                      :class="{ 'is-active': scenic.isCollected }">
                      <el-icon>
                        <Collection />
                      </el-icon>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { ElMessage, ElEmpty, ElSkeleton, ElSkeletonItem, ElRate } from 'element-plus';
import { Star, Collection, StarFilled, ArrowUp, ArrowDown } from '@element-plus/icons-vue';
import { ElSegmented } from 'element-plus';
import { regionMap } from '@/utils/regionMap'

export default {
  name: "ScenicMain",
  components: {
    ElEmpty, ElSkeleton, ElSkeletonItem, ElRate,
    Star, Collection, StarFilled, ArrowUp, ArrowDown, ElSegmented
  },
  data() {
    return {
      search: "",
      scenics: [],
      loading: true,
      currentUserId: null,
      baseImageURL: 'http://localhost:8080/',
      regionMap,

      // 新增：省份分段控制器
      provinceFilter: '全部',
      provinceOptions: [],


      // 新增：分段控制器相关数据
      levelFilter: '全部',
      levelOptions: [
        { label: '全部', value: '全部' },
        { label: '5A级', value: '5A' },
        { label: '4A级', value: '4A' },
        { label: '3A级', value: '3A' },
        { label: '2A级', value: '2A' },
        { label: '1A级', value: '1A' },
        { label: '其他', value: '其他' }
      ],
      // 新增：海拔分段
      altitudeFilter: '全部',
      altitudeOptions: [
        { label: '全部', value: '全部' },
        { label: '0-1000米', value: '0-1000' },
        { label: '1000-2000米', value: '1000-2000' },
        { label: '2000-3000米', value: '2000-3000' },
        { label: '3000-4000米', value: '3000-4000' },
        { label: '4000米及以上', value: '4000+' }
      ],

      // 榜单相关数据
      isRankCollapsed: false,
      activeTab: 'hot',
      rankLoading: true,
      boards: [
        {
          type: 'hot',
          title: '热门榜',
          topScenics: []
        },
        {
          type: 'good',
          title: '好评榜',
          topScenics: []
        },
        {
          type: 'difficulty',
          title: '难度榜',
          topScenics: []
        }
      ],
      allRankScenics: [],
      likeScenics: [],
      favoriteScenics: []
    }
  },
  computed: {

    filteredScenics() {
      let filtered = this.scenics;
      if (this.search) {
        const s = this.search.trim().toLowerCase();
        filtered = filtered.filter(
          scenic =>
            scenic.scenicAreaName.toLowerCase().includes(s) ||
            scenic.scenicSpotDescription.toLowerCase().includes(s)
        );
      }
      // 省份筛选
      if (this.provinceFilter && this.provinceFilter !== '全部') {
        filtered = filtered.filter(scenic => {
          const province = this.regionMap[scenic.regionId]?.province || '';
          if (this.provinceFilter === '其他') {
            const mainProvinces = this.provinceOptions
              .filter(option => option.value !== '全部' && option.value !== '其他')
              .map(option => option.value);
            return !mainProvinces.includes(province);
          }
          return province === this.provinceFilter;
        });
      }
      // 景区级别筛选
      if (this.levelFilter && this.levelFilter !== '全部') {
        filtered = filtered.filter(scenic => {
          const level = scenic.scenicLevel || '';
          if (this.levelFilter === '其他') {
            return !/^[1-5]A/.test(level);
          }
          return level.startsWith(this.levelFilter);
        });
      }
      // 海拔分段筛选
      if (this.altitudeFilter && this.altitudeFilter !== '全部') {
        filtered = filtered.filter(scenic => {
          const alt = Number(scenic.altitude) || 0;
          switch (this.altitudeFilter) {
            case '0-1000': return alt >= 0 && alt < 1000;
            case '1000-2000': return alt >= 1000 && alt < 2000;
            case '2000-3000': return alt >= 2000 && alt < 3000;
            case '3000-4000': return alt >= 3000 && alt < 4000;
            case '4000+': return alt >= 4000;
            default: return true;
          }
        });
      }
      return filtered;
    }
  },

  methods: {
    // 新增：格式化景点级别显示
    formatScenicLevel(level) {
      if (!level) return '';

      // 如果级别已经是格式化的字符串（如"5A级"），直接返回
      if (typeof level === 'string' && level.includes('级')) {
        return level;
      }

      // 如果级别是数字或者其他格式，进行格式化
      const levelStr = String(level).toUpperCase();

      // 处理数字级别
      if (/^\d+$/.test(levelStr)) {
        return `${levelStr}A级`;
      }

      // 处理已有A的级别
      if (levelStr.includes('A')) {
        return levelStr.includes('级') ? levelStr : `${levelStr}级`;
      }

      // 处理其他格式
      return levelStr.includes('级') ? levelStr : `${levelStr}级`;
    },

    // 新增：根据景点级别获取标签类型
    getLevelTagType(level) {
      if (!level) return '';

      const levelStr = String(level).toUpperCase();

      // 5A级景区 - 红色标签
      if (levelStr.includes('5A') || levelStr.includes('5级')) {
        return 'danger';
      }

      // 4A级景区 - 橙色标签
      if (levelStr.includes('4A') || levelStr.includes('4级')) {
        return 'warning';
      }

      // 3A级景区 - 蓝色标签
      if (levelStr.includes('3A') || levelStr.includes('3级')) {
        return 'primary';
      }

      // 2A级景区 - 绿色标签
      if (levelStr.includes('2A') || levelStr.includes('2级')) {
        return 'success';
      }

      // 1A级景区或其他 - 灰色标签
      return 'info';
    },

    async fetchScenics() {
      this.loading = true;
      try {
        console.log('Fetching loginId from localStorage...');
        const loginId = localStorage.getItem('loginId');
        if (loginId) {
          console.log(`Fetching userId for loginId: ${loginId}`);
          const userRes = await axios.get(`http://localhost:8080/mw/UserByLoginId?loginId=${loginId}`);
          this.currentUserId = userRes.data.userId;
          console.log(`Fetched userId: ${this.currentUserId}`);
        } else {
          console.log('No loginId found in localStorage.');
        }

        console.log('Fetching all scenic spots...');
        const response = await axios.get('http://localhost:8080/mw/ScenicSpotList');
        const scenicSpotList = response.data || [];
        console.log('Successfully fetched scenic spots list.');

        const processedScenics = await Promise.all(scenicSpotList.map(async (scenic) => {
          let mainImage = '';
          try {
            console.log(`Fetching image for scenic spot ${scenic.scenicSpotId}`);
            const imgRes = await axios.get(`http://localhost:8080/api/scenicSpotImage?scenicSpotId=${scenic.scenicSpotId}`);
            const imageLink = imgRes.data && imgRes.data.length > 0 ? imgRes.data[0] : null;
            if (imageLink && typeof imageLink === 'string' && imageLink.length > 0 &&
              (imageLink.startsWith('http://') || imageLink.startsWith('https://') || imageLink.startsWith('/') || imageLink.includes('.'))) {
              mainImage = imageLink.startsWith('http')
                ? imageLink
                : this.baseImageURL + imageLink;
            } else {
              console.warn(`Invalid or empty image link for scenic spot ${scenic.scenicSpotId}: '${imageLink}'. Using placeholder.`);
              mainImage = 'https://picsum.photos/400/200';
            }
            console.log(`Successfully processed image for scenic spot ${scenic.scenicSpotId}. Final image URL: ${mainImage}`);
          } catch (imgError) {
            console.error(`Error fetching image for scenic spot ${scenic.scenicSpotId}:`, imgError);
            mainImage = 'https://picsum.photos/400/200';
          }

          let isLiked = false;
          let isCollected = false;

          if (this.currentUserId) {
            try {
              console.log(`Checking like status for scenic spot ${scenic.scenicSpotId} and user ${this.currentUserId}`);
              const likeCheckRes = await axios.get(`http://localhost:8080/sclike/checkLike?userId=${this.currentUserId}&scenicSpotId=${scenic.scenicSpotId}`);
              isLiked = likeCheckRes.data;
              console.log(`Like status for ${scenic.scenicSpotId}: ${isLiked}`);
            } catch (likeError) {
              console.error(`Error checking like status for ${scenic.scenicSpotId}:`, likeError);
            }

            try {
              console.log(`Checking collect status for scenic spot ${scenic.scenicSpotId} and user ${this.currentUserId}`);
              const collectCheckRes = await axios.get(`http://localhost:8080/sf/checkFavorite?userId=${this.currentUserId}&scenicSpotId=${scenic.scenicSpotId}`);
              isCollected = collectCheckRes.data;
              console.log(`Collect status for ${scenic.scenicSpotId}: ${isCollected}`);
            } catch (collectError) {
              console.error(`Error checking collect status for ${scenic.scenicSpotId}:`, collectError);
            }
          } else {
            console.log(`currentUserId is null, skipping like/collect status checks for scenic spot ${scenic.scenicSpotId}`);
          }

          return {
            ...scenic,
            mainImage,
            isLiked,
            isCollected,
            scenicLevel: scenic.scenicSpotLevel, // 新增
          };
        }));

        this.scenics = processedScenics;
        console.log('All scenic data processed successfully.');

      } catch (error) {
        console.error('An unhandled error occurred while fetching scenic spots:', error);
        ElMessage.error('获取景点数据失败，请稍后再试。');
      } finally {
        this.loading = false;
        console.log('Scenic data fetching process finished.');
      }
    },

    async toggleLike(scenic) {
      if (!this.currentUserId) {
        ElMessage.warning('请先登录才能点赞。');
        return;
      }

      try {
        if (scenic.isLiked) {
          await axios.delete(`http://localhost:8080/sclike/deleteByUserAndScenic?userId=${this.currentUserId}&scenicSpotId=${scenic.scenicSpotId}`);
          scenic.isLiked = false;
          ElMessage.success('取消点赞成功！');
        } else {
          await axios.post('http://localhost:8080/sclike/insert', {
            userId: this.currentUserId,
            scenicSpotId: scenic.scenicSpotId,
            likeTime: new Date().toISOString()
          });
          scenic.isLiked = true;
          ElMessage.success('点赞成功！');
        }
        this.fetchScenicLikeCount();
      } catch (error) {
        console.error('点赞/取消点赞失败:', error);
        ElMessage.error('操作失败，请稍后再试。');
      }
    },

    async toggleCollect(scenic) {
      if (!this.currentUserId) {
        ElMessage.warning('请先登录才能收藏。');
        return;
      }

      try {
        if (scenic.isCollected) {
          await axios.delete(`http://localhost:8080/sf/deleteByUserAndScenic?userId=${this.currentUserId}&scenicSpotId=${scenic.scenicSpotId}`);
          scenic.isCollected = false;
          ElMessage.success('取消收藏成功！');
        } else {
          await axios.post('http://localhost:8080/sf/insert', {
            userId: this.currentUserId,
            scenicSpotId: scenic.scenicSpotId,
            favoriteTime: new Date().toISOString()
          });
          scenic.isCollected = true;
          ElMessage.success('收藏成功！');
        }
        this.fetchScenicFavoriteCount();
      } catch (error) {
        console.error('收藏/取消收藏失败:', error);
        ElMessage.error('操作失败，请稍后再试。');
      }
    },

    goToScenicDetail(scenicId) {
      this.$router.push(`/homepage/scenic/${scenicId}`);
    },

    toggleRankWidget() {
      this.isRankCollapsed = !this.isRankCollapsed;
      const content = this.$refs.rankContent;
      if (content) {
        if (this.isRankCollapsed) {
          content.style.maxHeight = '0';
          content.style.transition = 'max-height 0.3s ease-out';
        } else {
          content.style.maxHeight = '1000px'; // Large value to ensure five items are fully visible
          content.style.transition = 'max-height 0.3s ease-in';
        }
      }
    },

    async fetchRankData() {
      this.rankLoading = true;
      try {
        await Promise.all([
          this.fetchScenicsFromAPI(),
          this.fetchScenicLikeCount(),
          this.fetchScenicFavoriteCount()
        ]);
      } catch (error) {
        console.error('获取榜单数据失败:', error);
      } finally {
        this.rankLoading = false;
      }
    },

    async fetchScenicFavoriteCount() {
      try {
        const response = await axios.get('http://localhost:8080/sf/scenicFavoriteCount');
        const favoriteCounts = response.data;

        this.favoriteScenics = await Promise.all(favoriteCounts.slice(0, 5).map(async item => {
          let imgUrl = 'https://picsum.photos/200x120'; // Default placeholder
          try {
            const imgRes = await axios.get(`http://localhost:8080/api/scenicSpotImage?scenicSpotId=${item.scenicSpotId}`);
            const imageLink = imgRes.data && imgRes.data.length > 0 ? imgRes.data[0] : null;
            if (imageLink && typeof imageLink === 'string' && imageLink.length > 0) {
              imgUrl = imageLink.startsWith('http') ? imageLink : this.baseImageURL + imageLink;
            }
          } catch (imgError) {
            console.warn(`获取收藏景点 ${item.scenicSpotId} 图片失败:`, imgError);
          }
          return {
            id: item.scenicSpotId,
            name: item.scenicAreaName,
            img: imgUrl,
            favoriteCount: item.favoriteCount
          };
        }));
      } catch (error) {
        console.error('获取景区收藏数据失败:', error);
        this.favoriteScenics = [];
      }
    },

    async fetchScenicLikeCount() {
      try {
        const response = await axios.get('http://localhost:8080/sclike/scenicLikeCount');
        const likeCounts = response.data;

        this.likeScenics = await Promise.all(likeCounts.slice(0, 5).map(async item => {
          let imgUrl = 'https://picsum.photos/200x120'; // Default placeholder
          try {
            const imgRes = await axios.get(`http://localhost:8080/api/scenicSpotImage?scenicSpotId=${item.scenicSpotId}`);
            const imageLink = imgRes.data && imgRes.data.length > 0 ? imgRes.data[0] : null;
            if (imageLink && typeof imageLink === 'string' && imageLink.length > 0) {
              imgUrl = imageLink.startsWith('http') ? imageLink : this.baseImageURL + imageLink;
            }
          } catch (imgError) {
            console.warn(`获取点赞景点 ${item.scenicSpotId} 图片失败:`, imgError);
          }
          return {
            id: item.scenicSpotId,
            name: item.scenicAreaName,
            img: imgUrl,
            likeCount: item.likeCount
          };
        }));
      } catch (error) {
        console.error('获取景区点赞数据失败:', error);
        this.likeScenics = [];
      }
    },

    async fetchScenicsFromAPI() {
      try {
        const response = await axios.get('http://localhost:8080/mw/ScenicSpotList');
        const scenicSpotList = response.data || [];

        this.allRankScenics = await Promise.all(scenicSpotList.map(async scenic => {
          let mainImage = 'https://picsum.photos/200x120'; // Default placeholder
          try {
            const imgRes = await axios.get(`http://localhost:8080/api/scenicSpotImage?scenicSpotId=${scenic.scenicSpotId}`);
            const imageLink = imgRes.data && imgRes.data.length > 0 ? imgRes.data[0] : null;
            if (imageLink && typeof imageLink === 'string' && imageLink.length > 0) {
              mainImage = imageLink.startsWith('http') ? imageLink : this.baseImageURL + imageLink;
            }
          } catch (imgError) {
            console.warn(`获取景点 ${scenic.scenicSpotId} 图片失败:`, imgError);
          }
          return { ...scenic, mainImage };
        }));
      } catch (error) {
        console.error('获取景区数据失败:', error);
        this.allRankScenics = [];
      }
    },

    getCurrentRankScenics() {
      const board = this.boards.find(b => b.type === this.activeTab);
      if (!board) return [];

      if (this.activeTab === 'difficulty') {
        return [...this.allRankScenics]
          .sort((a, b) => (b.comprehensiveDifficultyIndex || 0) - (a.comprehensiveDifficultyIndex || 0))
          .slice(0, 5)
          .map(scenic => ({
            id: scenic.scenicSpotId,
            name: scenic.scenicAreaName,
            img: scenic.mainImage || 'https://picsum.photos/200x120',
            comprehensive_difficulty_index: scenic.comprehensiveDifficultyIndex
          }));
      } else if (this.activeTab === 'hot') {
        return this.favoriteScenics;
      } else if (this.activeTab === 'good') {
        return this.likeScenics;
      }

      return [];
    }
  },
  mounted() {
    // 自动生成省份选项（去重）
    const provinceSet = new Set();
    Object.values(this.regionMap).forEach(item => {
      if (item.province) provinceSet.add(item.province);
    });
    // 在"全部"和"其他"之间插入
    this.provinceOptions = [
      { label: '全部', value: '全部' },
      ...Array.from(provinceSet).map(p => ({ label: p, value: p })),
      { label: '其他', value: '其他' }
    ];

    this.fetchScenics();
    this.fetchRankData();
  },
  watch: {
    '$route': {
      handler: function (to, from) {
        if (to.path === '/scenic' && (to.query.refresh || from.query.refresh)) {
          this.fetchScenics();
        }
      },
      deep: true
    }
  }
}
</script>

<style scoped>
.segmented-block {
  margin-bottom: 32px;
}

::v-deep .glass-segmented {
  background: rgba(255,255,255,0.5);
  border-radius: 18px;
  padding: 10px 18px;
}

::v-deep .glass-segmented .el-segmented__group {
  display: flex !important;
  flex-wrap: wrap !important;
  max-height: 70px;
  overflow-y: auto;
  gap: 10px 8px;
}

::v-deep .glass-segmented .el-segmented__item {
  min-width: 78px;
  min-height: 32px;
  border-radius: 12px;
  cursor: pointer;
  /* 只做基础美化，不覆盖background、border、box-shadow... */
}

.province-segmented .el-segmented__group {
  display: flex;
  flex-wrap: wrap;
  max-height: 64px;
  overflow-y: auto;
  overflow-x: hidden;
  row-gap: 6px;
}

.province-segmented .el-segmented__item {
  flex: 0 0 12.5%;
  /* 每行8个，根据你需要调整 */
  box-sizing: border-box;
  min-width: 80px;
  /* 防止太窄无法点击，可根据实际调整 */
  cursor: pointer;
}

.scenic-province-segment {
  margin: 16px 0 8px 0;
  display: flex;
  justify-content: flex-start;
}

.province-segmented {
  min-width: 400px;
}

.scenic-level-segment {
  margin-bottom: 8px;
  display: flex;
  justify-content: flex-start;
}

.altitude-segmented {
  min-width: 390px;
}

.scenic-altitude-segment {
  margin-bottom: 16px;
  display: flex;
  justify-content: flex-start;
}

.altitude-segmented {
  min-width: 390px;
}

.scenic-level-segment {
  margin: 16px 0 8px 0;
  display: flex;
  justify-content: flex-start;
}

.level-segmented {
  min-width: 330px;
}

::v-deep .province-segmented .el-segmented__group {
  display: flex !important;
  flex-wrap: wrap !important;
  max-height: 200px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  row-gap: 6px !important;
}

::v-deep .province-segmented .el-segmented__item {
  flex: 0 0 12.5% !important;
  min-width: 80px !important;
  box-sizing: border-box !important;
  margin-bottom: 2px !important;
  cursor: pointer !important;
}

/* 可选：美化滚动条 */
::v-deep .province-segmented .el-segmented__group::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

::v-deep .province-segmented .el-segmented__group::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

/* 景区名称容器样式 */
.scenic-title-container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.scenic-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  flex: 1;
}

.scenic-level-tag {
  font-size: 11px;
  height: 20px;
  line-height: 18px;
  border-radius: 10px;
  font-weight: 500;
  flex-shrink: 0;
}

/* 榜单中的名称容器样式 */
.rank-name-container {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.rank-name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 榜单中的级别标签 */
.rank-name-container .scenic-level-tag {
  font-size: 10px;
  height: 18px;
  line-height: 16px;
  border-radius: 8px;
  font-weight: 500;
  flex-shrink: 0;
}

/* 全局样式重置 */
/* Global reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Page container with fixed background */
.scenic-page {
  padding: 0;
  margin: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.scenic-page::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background:
    linear-gradient(135deg, rgba(74, 144, 226, 0.8), rgba(107, 91, 149, 0.8)),
    url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80') center/cover;
  z-index: 0;
  pointer-events: none;
}

.scenic-page>* {
  position: relative;
  z-index: 1;
}

/* Content layout */
.scenic-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0;
  align-items: flex-start;
  position: relative;
  z-index: 2;
}

/* Header styles */
.strategy-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
  position: relative;
  width: 100%;
  padding: 120px 20px 20px;
  overflow: hidden;
  background: none;
  min-height: auto;
}

.header-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  animation: float 6s ease-in-out infinite;
}

.particle:nth-child(odd) {
  animation-delay: -2s;
}

.particle:nth-child(even) {
  animation-delay: -4s;
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
    opacity: 0;
  }

  50% {
    transform: translateY(-100px) rotate(180deg);
    opacity: 1;
  }
}

.strategy-header-content {
  position: relative;
  z-index: 2;
  margin-bottom: 0;
  max-width: 800px;
  width: 100%;
}

.strategy-header h2 {
  font-size: 3rem;
  font-weight: 300;
  letter-spacing: 6px;
  margin: 0 0 15px;
  text-transform: uppercase;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.strategy-subtitle {
  font-size: 1.1rem;
  font-weight: 300;
  letter-spacing: 2px;
  margin-bottom: 0;
  opacity: 0.9;
}

.subtitle-text {
  display: inline-block;
}

.subtitle-divider {
  margin: 0 15px;
  opacity: 0.7;
}

/* Section intro */
.section-intro {
  margin-top: 15px;
  padding: 0 20px;
  margin-bottom: 25px;
}

.intro-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 1px;
  margin-bottom: 15px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
}

.section-intro h3 {
  font-size: 1.6rem;
  font-weight: 400;
  margin: 0 0 10px;
  color: white;
  letter-spacing: 2px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.section-intro p {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 15px;
  line-height: 1.6;
  letter-spacing: 1px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

/* Search area */
.strategy-search {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  justify-content: center;
  z-index: 2;
  width: 100%;
  padding: 0 20px;
  position: relative;
  margin-top: 20px;
}

.strategy-search input {
  width: 320px;
  padding: 10px 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 1rem;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  outline: none;
  min-width: 300px;
}

.strategy-search input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.strategy-search input:focus {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Content wrapper */
.content-wrapper {
  display: flex;
  gap: 40px;
  margin-top: 30px;
  padding: 0 60px 40px;
}

/* Rank widget */
.rank-widget {
  background: transparent;
  /* 让容器透明 */
  max-height: 665px;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  margin-bottom: 20px;
  flex-shrink: 0;
  width: 350px;
  /* 删除 min-height、height、flex-grow 等属性 */
}

.rank-widget-content {
  overflow: hidden;
  height: auto;
  transition: max-height 0.5s ease;
  background: rgba(255, 255, 255, 0.95);
  /* 只给内容区加背景色 */
  border-radius: 0 0 16px 16px;
}

.rank-widget:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
}

.rank-widget.rank-widget-collapsed {
  width: 60px;
  border-radius: 12px;
  background: none;
  box-shadow: none;
}

.rank-widget.rank-widget-collapsed .rank-widget-header {
  background: none;
}

.rank-widget.rank-widget-collapsed .rank-widget-header h3 {
  display: none;
}

.rank-widget.rank-widget-collapsed .rank-widget-content {
  display: none;
}

.rank-widget-header {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  background: #2c3e50;
  color: white;
  transition: all 0.3s ease;
}

.rank-widget-header h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: white;
  margin: 0;
}

.toggle-btn {
  padding: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #737373;
  transition: all 0.2s;
}

.toggle-btn:hover {
  color: #333;
}

.collapsed-rank-icon {
  font-size: 1.2rem;
  color: white;
}

.rank-widget-content {
  overflow: hidden;
  height: auto;
  transition: max-height 0.5s ease;
}

.rank-tabs {
  display: flex;
  border-bottom: 1px solid #f0f0f0;
  background: #ecf0f1;
}

.rank-tab {
  flex: 1;
  padding: 15px 10px;
  text-align: center;
  font-weight: 500;
  color: #737373;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9rem;
  border-bottom: 2px solid transparent;
}

.rank-tab:hover {
  color: #333;
}

.rank-tab.active {
  color: #262626;
  border-bottom: 2px solid #0095f6;
  font-weight: 600;
  background: white;
}

.rank-content {
  padding: 20px;
  overflow-y: auto;
  max-height: 550px;
  /* 固定高度，刚好容纳5个榜单项 */
}

/* Rank items */
.rank-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 15px 0;
  border-bottom: 1px solid #f5f5f5;
}

.rank-thumbnail {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.rank-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.rank-item:hover .rank-img {
  transform: scale(1.05);
}

.rank-info-container {
  flex: 1;
  position: relative;
}

.rank-number {
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: white;
  color: #737373;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.7rem;
  z-index: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.rank-item:nth-child(1) .rank-number {
  background: #f39c12;
  color: white;
}

.rank-item:nth-child(2) .rank-number {
  background: #95a5a6;
  color: white;
}

.rank-item:nth-child(3) .rank-number {
  background: #e67e22;
  color: white;
}

.rank-info {
  padding-left: 5px;
}

.rank-name {
  font-size: 1rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rank-meta {
  font-size: 0.85rem;
  color: #7f8c8d;
  display: flex;
  align-items: center;
  gap: 5px;
}

.meta-icon {
  font-size: 0.9rem;
}

.difficulty-rate {
  margin-top: 2px;
}

/* Scenic card container */
.scenic-card-container {
  flex: 1;
  padding: 0;
}

.scenic-card-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 40px;
  margin-bottom: 60px;
}

/* Scenic card styles */
.scenic-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
}

.scenic-card:hover {
  transform: translateY(-15px);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
}

.scenic-img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.scenic-card:hover .scenic-img {
  transform: scale(1.1);
}

.scenic-info {
  padding: 20px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  min-height: 140px;
}

.scenic-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 10px;
  line-height: 1.3;
  letter-spacing: 0.5px;
}

.scenic-desc {
  color: #4a5568;
  line-height: 1.8;
  margin-bottom: 20px;
  font-size: 0.95rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.scenic-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.action-button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #f0f0f0;
  color: #7f8c8d;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-button:hover {
  transform: scale(1.1);
}

.like-button.is-active {
  background: #e74c3c;
  color: white;
}

.collect-button.is-active {
  background: #f59e0b;
  color: white;
}

/* Skeleton styles */
.scenic-card-skeleton,
.rank-item-skeleton {
  background: white;
  border-radius: 0;
  padding: 20px;
  animation: shimmer 1.5s ease-in-out infinite alternate;
}

@keyframes shimmer {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0.7;
  }
}

/* Empty state */
.empty-scenic-list {
  margin: 100px 0;
  color: #7f8c8d;
  text-align: center;
  padding: 80px 20px;
  background: none;
}

.empty-icon {
  font-size: 3em;
  margin-bottom: 16px;
  opacity: 0.6;
}

/* Animations */
.scenic-card-list .scenic-card {
  animation: fadeInUp 0.8s ease-out forwards;
  opacity: 0;
  transform: translateY(40px);
}

.scenic-card-list .scenic-card:nth-child(1) {
  animation-delay: 0.1s;
}

.scenic-card-list .scenic-card:nth-child(2) {
  animation-delay: 0.2s;
}

.scenic-card-list .scenic-card:nth-child(3) {
  animation-delay: 0.3s;
}

.scenic-card-list .scenic-card:nth-child(4) {
  animation-delay: 0.4s;
}

.scenic-card-list .scenic-card:nth-child(5) {
  animation-delay: 0.5s;
}

.scenic-card-list .scenic-card:nth-child(6) {
  animation-delay: 0.6s;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive design */
@media (max-width: 1200px) {
  .content-wrapper {
    flex-direction: column;
  }

  .rank-widget {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
  }

  .scenic-card-container {
    width: 100%;
  }

  .scenic-card-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .strategy-header {
    padding: 30px 15px 20px;
  }

  .strategy-header h2 {
    font-size: 2.2rem;
    letter-spacing: 3px;
  }

  .section-intro h3 {
    font-size: 1.3rem;
  }

  .strategy-search input {
    width: 100%;
    max-width: 300px;
    min-width: 250px;
  }

  .scenic-content {
    padding: 0 20px 40px;
  }

  .content-wrapper {
    margin-top: 40px;
  }

  .scenic-card-list {
    gap: 16px;
  }

  .rank-item {
    gap: 10px;
  }

  .rank-thumbnail {
    width: 60px;
    height: 60px;
  }
}

@media (max-width: 480px) {
  .strategy-header {
    padding: 25px 15px 15px;
  }

  .strategy-header h2 {
    font-size: 1.8rem;
    letter-spacing: 2px;
  }

  .strategy-subtitle {
    font-size: 0.95rem;
  }

  .scenic-info {
    padding: 16px;
    min-height: 120px;
  }

  .rank-content {
    padding: 20px 15px;
  }

  .strategy-search input {
    min-width: 200px;
  }

  .scenic-card-list {
    grid-template-columns: 1fr;
  }

  .action-button {
    width: 35px;
    height: 35px;
    font-size: 1rem;
  }
}
</style>